<template>
    <div>
        <!-- 一、头部自定义：父传子实现自定义header的背景色和文字颜色以及title-->
        <MyHeader title="SHOP CAR CASE-二周目" color="#fef9f9" bgc="#ecaebc"></MyHeader>
        <div class="main">
            <MyGoods :arr="list" v-for="item in list" :key="item.id" :obj="item"></MyGoods>
        </div>
        <MyFooter :arr="list"></MyFooter>
    </div>
</template>

<script>
import MyHeader from './components/MyHeader'
import MyGoods from './components/MyGoods'
import MyFooter from './components/MyFooter'
export default {
    components: {
        MyHeader,
        MyGoods,
        MyFooter,
    },
    data() {
        return {
            list: [], //存放获取来的购物车商品列表
        }
    },
    created() {
        this.$axios({
            url: '/api/cart', //向服务器请求数据，methods不写默认为'get'
        })
            .then((res) => (this.list = res.data.list)) //请求来的数据存入list以供渲染页面使用
            .catch((err) => console.log(err))
    },
}
</script>

<style>
.main {
    padding-top: 45px;
    padding-bottom: 50px;
}
</style>